<!--
 * @author: Spring
 * @create: 2021-06-22 17:34 PM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-07-05 14:04 PM
 * @desc: 
-->
<template>
  <div class="container">
    <div class="content">
      <img class="logo" src="/img/svg/logo.svg" alt="logo" />
      <img class="smalllogo" src="/img/svg/smalllogo.svg" alt="logo" />
      <div class="threebox">
        <ul class="leftList">
          <li
            class="text"
            :style="{ color: current == index ? '#1e80ff' : '#86909c' }"
            v-for="(item, index) in list"
            :key="item.title"
            @click="go(index)"
          >
            {{ item.title }}
          </li>
          <li class="svg">
            <svg
              width="127"
              height="21"
              viewBox="0 0 127 21"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="conference-svg"
              data-v-3a33dc2b=""
            >
              <g clip-path="url(#clip0)" data-v-3a33dc2b="">
                <path
                  d="M97.2408 10.3547H84.0062V12.189H97.2408V10.3547Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M83.0251 15.4666H86.4611L83.8356 20.4767H85.3231H86.1831H95.064H96.3354H97.4115L95.5236 16.1339H93.1761L94.2673 18.6424H87.145L88.8086 15.4666H98.2219V13.6323H83.0251V15.4666Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M86.7734 7.52802H94.4736L95.9996 9.72827H98.3457L95.5469 5.69653H95.0735H93.2008H88.0462H86.4665H85.7001L82.9012 9.72827H85.2474L86.7734 7.52802Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M28.3668 8.10736H30.6661V6.21533H17.3751V8.10736H19.7061V11.9602H16.5V13.8522H19.7061V14.8278L18.0866 20.453H20.2221L21.8417 14.8278V13.8522H26.2312V20.4971H28.3668V13.8536H31.5784V11.9616H28.3668V8.10736ZM21.8417 11.9616V8.10874H26.2312V11.9616H21.8417Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M75.6812 5.80957H72.9581L71.8669 8.33319H65.9376V10.3546H70.9931L66.638 20.4298H69.3598L73.7163 10.3546H81.4949V8.33319H74.59L75.6812 5.80957Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M73.4232 11.1926L78.6893 20.3198H81.4124L76.1464 11.1926H73.4232Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M64.6125 6.22362H62.5375L62.3875 6.49882H57.9829V5.75439H55.8776V6.49882H51.0587V8.33306H55.8776V9.63202H49.9469V11.4663H52.5765L50.3267 15.5916H52.077V20.4297H52.7664H54.1823H61.4669H63.1994H63.5723V14.2087H63.5998V12.3744H54.1561L54.6515 11.4663H64.8616V9.63202H62.7549L64.6125 6.22362ZM54.1809 18.5954V17.3006H61.4656V18.5954H54.1809ZM61.4656 15.5916H54.1809V14.2087H61.4656V15.5916ZM57.9815 8.33306H61.3858L60.6785 9.63202H57.9815V8.33306Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M47.5926 13.0434V11.2091H38.5865L38.9608 10.1688H48.2572V8.33323H39.6199L40.5831 5.65137H38.4517L37.4884 8.33323H35.8056L36.4729 6.08757H34.658L33.4457 10.1675H34.358H35.2593H36.828L33.1774 20.3349H35.3088L37.6935 13.6956L40.8872 16.5247L36.8789 20.4298H40.4799L42.6967 18.1277L45.296 20.4298H48.2558L44.0603 16.7132L47.5912 13.0461L47.5926 13.0434ZM44.4607 13.0434L42.2976 15.1514L40.5817 13.6323H37.7155L37.9274 13.0434H44.4607Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M47.0394 7.7264L46.2069 5.5H44.0768L44.9079 7.7264H47.0394Z"
                  fill="#86909C"
                  data-v-3a33dc2b=""
                  class="groupa"
                ></path>
              </g>
              <g clip-path="url(#clip1)" data-v-3a33dc2b="">
                <path
                  d="M102.634 9.41109V8.40738L105.813 5.06039C106.08 4.7818 106.361 4.45777 106.382 4.02309C106.416 3.3533 105.914 2.806 105.199 2.806C104.452 2.806 103.972 3.37503 103.948 4.04483H102.5C102.522 2.36935 103.816 1.5 105.201 1.5C106.541 1.5 107.835 2.32588 107.835 3.98753C107.835 4.71265 107.489 5.30341 106.874 5.93961L104.887 8.00432H107.843L107.831 9.41109H102.634Z"
                  fill="#1E80FF"
                  data-v-3a33dc2b=""
                ></path>
                <path
                  d="M109.228 5.51679C109.228 3.06285 110.443 1.5 112.407 1.5C114.392 1.5 115.598 3.07273 115.598 5.50494C115.598 7.93714 114.38 9.5 112.407 9.5C110.399 9.5 109.228 7.96085 109.228 5.51679ZM114.147 5.50494C114.147 3.96579 113.477 2.90479 112.407 2.90479C111.314 2.90479 110.678 3.98753 110.678 5.51482C110.678 7.11126 111.369 8.09323 112.407 8.09323C113.511 8.09323 114.147 7.02235 114.147 5.50494Z"
                  fill="#1E80FF"
                  data-v-3a33dc2b=""
                ></path>
                <path
                  d="M117.115 9.41109V8.40738L120.294 5.06039C120.561 4.7818 120.841 4.45777 120.863 4.02309C120.897 3.3533 120.395 2.806 119.68 2.806C118.933 2.806 118.453 3.37503 118.429 4.04483H116.979C117.002 2.36935 118.296 1.5 119.682 1.5C121.021 1.5 122.315 2.32588 122.315 3.98753C122.315 4.71265 121.969 5.30341 121.355 5.93961L119.369 8.00432H122.325L122.313 9.41109H117.115Z"
                  fill="#1E80FF"
                  data-v-3a33dc2b=""
                ></path>
                <path
                  d="M125.461 9.41115V2.98389H123.631V1.60083H126.911V9.41115H125.461Z"
                  fill="#1E80FF"
                  data-v-3a33dc2b=""
                ></path>
              </g>
              <path
                d="M10 1L12.5 5L8.5 5.5L7 4L10 1Z"
                stroke="#6AA1FF"
                data-v-3a33dc2b=""
              ></path>
              <path
                d="M8.5 20L1 10L3 8L7.5 11.5M8.5 20L12.5 18.5M8.5 20L7.5 11.5M7.5 11.5L12 11"
                stroke="#6AA1FF"
                data-v-3a33dc2b=""
              ></path>
              <path
                d="M4.5 5.5L8 8.5L13 8"
                stroke="#6AA1FF"
                data-v-3a33dc2b=""
              ></path>
              <defs data-v-3a33dc2b="">
                <clipPath id="clip0" data-v-3a33dc2b="">
                  <rect
                    width="81.8457"
                    height="15"
                    fill="white"
                    transform="translate(16.5 5.5)"
                    data-v-3a33dc2b=""
                  ></rect>
                </clipPath>
                <clipPath id="clip1" data-v-3a33dc2b="">
                  <rect
                    width="24.411"
                    height="8"
                    fill="white"
                    transform="translate(102.5 1.5)"
                    data-v-3a33dc2b=""
                  ></rect>
                </clipPath>
              </defs>
            </svg>
          </li>
        </ul>
        <div class="smallList">
          <div class="nownode" @click="show.nav = !show.nav">
            {{ list[current].title }} <span class="el-icon-arrow-down"></span>
          </div>
          <ul class="smallList_leftList" v-show="show.nav">
            <li
              class="text"
              :style="{ color: current == index ? '#1e80ff' : '#86909c' }"
              v-for="(item, index) in list"
              :key="item.title"
              @click="go(index)"
            >
              {{ item.title }}
            </li>
            <li class="svg">
              <svg
                width="127"
                height="21"
                viewBox="0 0 127 21"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="conference-svg"
                data-v-3a33dc2b=""
              >
                <g clip-path="url(#clip0)" data-v-3a33dc2b="">
                  <path
                    d="M97.2408 10.3547H84.0062V12.189H97.2408V10.3547Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M83.0251 15.4666H86.4611L83.8356 20.4767H85.3231H86.1831H95.064H96.3354H97.4115L95.5236 16.1339H93.1761L94.2673 18.6424H87.145L88.8086 15.4666H98.2219V13.6323H83.0251V15.4666Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M86.7734 7.52802H94.4736L95.9996 9.72827H98.3457L95.5469 5.69653H95.0735H93.2008H88.0462H86.4665H85.7001L82.9012 9.72827H85.2474L86.7734 7.52802Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M28.3668 8.10736H30.6661V6.21533H17.3751V8.10736H19.7061V11.9602H16.5V13.8522H19.7061V14.8278L18.0866 20.453H20.2221L21.8417 14.8278V13.8522H26.2312V20.4971H28.3668V13.8536H31.5784V11.9616H28.3668V8.10736ZM21.8417 11.9616V8.10874H26.2312V11.9616H21.8417Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M75.6812 5.80957H72.9581L71.8669 8.33319H65.9376V10.3546H70.9931L66.638 20.4298H69.3598L73.7163 10.3546H81.4949V8.33319H74.59L75.6812 5.80957Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M73.4232 11.1926L78.6893 20.3198H81.4124L76.1464 11.1926H73.4232Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M64.6125 6.22362H62.5375L62.3875 6.49882H57.9829V5.75439H55.8776V6.49882H51.0587V8.33306H55.8776V9.63202H49.9469V11.4663H52.5765L50.3267 15.5916H52.077V20.4297H52.7664H54.1823H61.4669H63.1994H63.5723V14.2087H63.5998V12.3744H54.1561L54.6515 11.4663H64.8616V9.63202H62.7549L64.6125 6.22362ZM54.1809 18.5954V17.3006H61.4656V18.5954H54.1809ZM61.4656 15.5916H54.1809V14.2087H61.4656V15.5916ZM57.9815 8.33306H61.3858L60.6785 9.63202H57.9815V8.33306Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M47.5926 13.0434V11.2091H38.5865L38.9608 10.1688H48.2572V8.33323H39.6199L40.5831 5.65137H38.4517L37.4884 8.33323H35.8056L36.4729 6.08757H34.658L33.4457 10.1675H34.358H35.2593H36.828L33.1774 20.3349H35.3088L37.6935 13.6956L40.8872 16.5247L36.8789 20.4298H40.4799L42.6967 18.1277L45.296 20.4298H48.2558L44.0603 16.7132L47.5912 13.0461L47.5926 13.0434ZM44.4607 13.0434L42.2976 15.1514L40.5817 13.6323H37.7155L37.9274 13.0434H44.4607Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M47.0394 7.7264L46.2069 5.5H44.0768L44.9079 7.7264H47.0394Z"
                    fill="#86909C"
                    data-v-3a33dc2b=""
                    class="groupa"
                  ></path>
                </g>
                <g clip-path="url(#clip1)" data-v-3a33dc2b="">
                  <path
                    d="M102.634 9.41109V8.40738L105.813 5.06039C106.08 4.7818 106.361 4.45777 106.382 4.02309C106.416 3.3533 105.914 2.806 105.199 2.806C104.452 2.806 103.972 3.37503 103.948 4.04483H102.5C102.522 2.36935 103.816 1.5 105.201 1.5C106.541 1.5 107.835 2.32588 107.835 3.98753C107.835 4.71265 107.489 5.30341 106.874 5.93961L104.887 8.00432H107.843L107.831 9.41109H102.634Z"
                    fill="#1E80FF"
                    data-v-3a33dc2b=""
                  ></path>
                  <path
                    d="M109.228 5.51679C109.228 3.06285 110.443 1.5 112.407 1.5C114.392 1.5 115.598 3.07273 115.598 5.50494C115.598 7.93714 114.38 9.5 112.407 9.5C110.399 9.5 109.228 7.96085 109.228 5.51679ZM114.147 5.50494C114.147 3.96579 113.477 2.90479 112.407 2.90479C111.314 2.90479 110.678 3.98753 110.678 5.51482C110.678 7.11126 111.369 8.09323 112.407 8.09323C113.511 8.09323 114.147 7.02235 114.147 5.50494Z"
                    fill="#1E80FF"
                    data-v-3a33dc2b=""
                  ></path>
                  <path
                    d="M117.115 9.41109V8.40738L120.294 5.06039C120.561 4.7818 120.841 4.45777 120.863 4.02309C120.897 3.3533 120.395 2.806 119.68 2.806C118.933 2.806 118.453 3.37503 118.429 4.04483H116.979C117.002 2.36935 118.296 1.5 119.682 1.5C121.021 1.5 122.315 2.32588 122.315 3.98753C122.315 4.71265 121.969 5.30341 121.355 5.93961L119.369 8.00432H122.325L122.313 9.41109H117.115Z"
                    fill="#1E80FF"
                    data-v-3a33dc2b=""
                  ></path>
                  <path
                    d="M125.461 9.41115V2.98389H123.631V1.60083H126.911V9.41115H125.461Z"
                    fill="#1E80FF"
                    data-v-3a33dc2b=""
                  ></path>
                </g>
                <path
                  d="M10 1L12.5 5L8.5 5.5L7 4L10 1Z"
                  stroke="#6AA1FF"
                  data-v-3a33dc2b=""
                ></path>
                <path
                  d="M8.5 20L1 10L3 8L7.5 11.5M8.5 20L12.5 18.5M8.5 20L7.5 11.5M7.5 11.5L12 11"
                  stroke="#6AA1FF"
                  data-v-3a33dc2b=""
                ></path>
                <path
                  d="M4.5 5.5L8 8.5L13 8"
                  stroke="#6AA1FF"
                  data-v-3a33dc2b=""
                ></path>
                <defs data-v-3a33dc2b="">
                  <clipPath id="clip0" data-v-3a33dc2b="">
                    <rect
                      width="81.8457"
                      height="15"
                      fill="white"
                      transform="translate(16.5 5.5)"
                      data-v-3a33dc2b=""
                    ></rect>
                  </clipPath>
                  <clipPath id="clip1" data-v-3a33dc2b="">
                    <rect
                      width="24.411"
                      height="8"
                      fill="white"
                      transform="translate(102.5 1.5)"
                      data-v-3a33dc2b=""
                    ></rect>
                  </clipPath>
                </defs>
              </svg>
            </li>
          </ul>
        </div>
        <div class="rightList">
          <div class="search">
            <el-input
              :placeholder="placeholder"
              :suffix-icon="screenWidth > 700 ? 'el-icon-search' : 'none'"
              v-model="search"
              :class="
                placeholder == '探索掘金' ? 'search_input' : 'search_inputFocus'
              "
              v-if="screenWidth > 345"
              @focus="searchFocus"
              @blur="searchBlur"
            >
            </el-input>
          </div>
          <div class="framerCenter" v-show="placeholder == '探索掘金'">
            创作者中心
          </div>
          <div class="write" v-show="placeholder == '探索掘金'">
            <div class="text" @click="write('article')">写文章</div>
            <div class="img" @click="show.fd = !show.fd">
              <img src="/img/svg/arrows.svg" alt="" />
            </div>
            <div class="fd" v-show="show.fd" @click="write('fd')">发布沸点</div>
          </div>
        </div>
        <div
          class="login"
          v-if="!this.$store.state.token"
          @click="$store.commit('judgeLogin')"
        >
          登录
        </div>
        <div class="yes_login" v-else>
          <span class="el-icon-message-solid ld"></span>
          <img
            :src="$store.state.info.icon"
            alt=""
            @click="show.setting = !show.setting"
          />
          <div class="settingbox" v-show="show.setting">
            <div class="set" @click="usset">
              <span class="el-icon-s-tools"></span>设置
            </div>
            <div class="logout" @click="logout">
              <span class="el-icon-switch-button"></span>退出
            </div>
          </div>
        </div>
      </div>
    </div>
    <login class="loginn" />
    <div class="bgb" v-show="show.boilingpoint" @click.stop="closebp($event)">
      <ReleaseBoilingPoint class="releaseboilingpoint" />
    </div>
  </div>
</template>

<script>
import login from "./Login.vue";
import ReleaseBoilingPoint from "./ReleaseBoilingPoint.vue";
import { mapState } from "vuex";

export default {
  data() {
    return {
      //搜索框 提示
      placeholder: "探索掘金",
      //屏幕尺寸
      screenWidth: 0,
      show: {
        //是否展示发布沸点
        fd: false,
        //小屏幕下 是否展示nav
        nav: false,
        //设置
        setting: false,
        //显示发布沸点
        boilingpoint: false,
      },
      //当前所在位置
      // current: $store.current,
      //导航列表
      list: [
        { title: "首页", path: "/" },
        { title: "沸点", path: "/boillingpoint" },
        { title: "咨询" },
        { title: "小册" },
        { title: "活动" },
      ],
      //搜索内容
      search: "",
    };
  },
  components: {
    login,
    ReleaseBoilingPoint,
  },
  computed: {
    ...mapState(["current"]),
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  methods: {
    //选择nav
    go(index) {
      if(index==this.$store.state.current){
        return
      }
      this.$store.commit("setCurrent", index);
      this.$router.push(this.list[index].path);
    },
    //搜索框
    searchFocus() {
      this.placeholder = "搜索文章/小册/标签/用户";
    },
    searchBlur() {
      this.placeholder = "探索掘金";
    },
    write(i) {
      this.$store.commit("judgeLogin");
      if (i == "article") {
        this.$router.push("write");
      }
      if (i == "fd") {
        this.show.boilingpoint = !this.show.boilingpoint;
      }
    },
    //退出登录
    logout() {},
    closebp(e) {
      if (e.target.className == "bgb") {
        this.show.boilingpoint = false;
      }
    },
    //设置
    usset() {
      this.$router.push("/Setpage");
      console.log(213);
    },
  },
};
</script>

<style scoped lang="scss">
.loginn {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.bgb {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 99;
  .releaseboilingpoint {
    width: 570px;
    min-height: 153px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 16px 15px 10px;
    position: absolute;
    left: 50%;
    top: 200px;
    transform: translate(-50%);
  }
}
.logo {
  display: flex;
}
.smalllogo {
  display: none;
}
.container {
  width: 100%;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  background-color: #fff;
  // overflow: hidden;
}
.content {
  max-width: 1200px;
  height: 60px;
  margin: 0 auto;
  @include flex(flex-start, center);
}
.threebox {
  flex: 1;
  @include flex(space-between, center);
  .smallList {
    display: none;
  }
}
.leftList {
  width: 530px;
  @include flex(space-between, center);
  li {
    height: 60px;
    cursor: pointer;
    @include flex;
    @include font(16px, #86909c);
    &:hover {
      color: #1e80ff;
    }
    svg:hover .groupa {
      fill: #388eff;
    }
  }
  .text {
    flex: 1;
  }
  .svg {
    flex: 2.3;
  }
}
.rightList {
  flex: 1;
  @include flex(flex-end, center);
  ::v-deep .search_input .el-input__inner {
    width: 160px;
    height: 32px;
    outline: none;
    border: none;
    background-color: #f4f5f5;
  }
  ::v-deep .search_inputFocus .el-input__inner {
    width: 500px;
    height: 32px;
    outline: none;
    border: none;
    background-color: #f4f5f5;
  }
  .framerCenter {
    width: 102px;
    height: 32px;
    margin: 0 24px;
    @include flex();
    background-color: #e8f3ff;
    color: #1e80ff;
    cursor: pointer;
  }
  .write {
    height: 32px;
    @include flex();
    border-radius: 2px;
    // overflow: hidden;
    position: relative;
    > div {
      color: #fff;
      background-color: #1e80ff;
      @include flex();
      height: 100%;
      &:hover {
        background-color: #0876e4;
      }
    }
    .text {
      width: 73px;
      cursor: pointer;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }
    .img {
      cursor: pointer;
      width: 24px;
      border-left: 1px solid hsla(0, 0%, 100%, 0.1);
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }
    .fd {
      background-color: #fff;
      border: 1px solid #ebebeb;
      cursor: pointer;
      border-top: none;
      color: #3b76c5;
      @include flex();
      z-index: 100;
      @include position(absolute, none, none, -33px, none, 100%, 32px);
      &:hover {
        background-color: #f9f9f9;
      }
    }
  }
}
.login {
  margin-left: 12px;
  cursor: pointer;
  width: 74px;
  height: 30px;
  background-color: #fff;
  border: solid 1px #007fff;
  color: #007fff;
  @include flex();
}
.yes_login {
  margin-left: 12px;
  position: relative;
  @include flex(space-between, center);
  .ld {
    font-size: 28px;
    color: #86909c;
    cursor: pointer;
  }
  img {
    margin-left: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
  }
  .settingbox {
    @include position(absolute, none, none, -90px, 0, 80px, auto);
    border: 1px solid #dcdddf;
    background-color: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 10px 0;
    z-index: 1000;
    div {
      width: 100%;
      height: 30px;
      cursor: pointer;
      @include flex(flex-start);
      @include font(13px, #4e5969);
      span {
        margin-left: 10px;
      }
    }
  }
}
@media screen and (max-width: 980px) {
  .framerCenter,
  .write,
  .leftList {
    display: none !important;
  }
  .container > .content > .threebox .smallList {
    position: relative;
    display: flex;
    .nownode {
      cursor: pointer;
      display: flex;
      height: 60px;
      margin-left: 20px;
      color: #1e80ff;
      flex-wrap: nowrap;
      @include flex();
      span {
        font-weight: 600;
        margin-left: 5px;
      }
    }
    &_leftList {
      border: 1px solid #dcdddf;
      border-radius: 2px;
      transform: translate(-50%);
      @include position(absolute, none, none, -296px, 50%, 170px, 294px);
      @include flex(space-around, center, column);
      li {
        cursor: pointer;
        @include flex;
        @include font(16px, #86909c);
        &:hover {
          color: #1e80ff !important;
        }
        svg:hover .groupa {
          fill: #388eff;
        }
      }
    }
  }
}
@media screen and (max-width: 700px) {
  .logo {
    display: none;
  }
  .smalllogo {
    display: flex;
  }
  ::v-deep .search_input .el-input__inner {
    width: 130px !important;
    height: 32px;
    outline: none;
    border: none;
    background-color: #f4f5f5;
  }
}
</style>
